<template>
    <Wrapper tab="/setting/role">
        <div class="role">
            <div class="card">
                <Grouping
                    class="grouping"
                    :data="rolePermissionArr.data"
                    :loading="rolePermissionArr.loading"
                    :config="config"
                    :width="300"
                    enableAdd
                    title="角色"
                    @add="handleModalSubmit"
                    @delete="handleModalDelete"
                    @edit="handleModalEdit"
                >
                    <template #search>
                        <div class="search">
                            <Search :style="{width: '100%'}" placeholder="搜角色" />
                        </div>
                    </template>
                </Grouping>
                <div class="card-table">
                    <div class="card-header">功能分类</div>
                    <div class="card-content"></div>
                </div>
            </div>
        </div>
    </Wrapper>
</template>

<script setup lang="ts">
import {message} from "ant-design-vue";
import {useRequest} from "alova/client";
import {Grouping, Search} from "@/components";
import {roleCreate, rolePermissionList, permissionList} from "@/api";
import Wrapper from "./components/Wrapper.vue";

const config = {
    title: "roleName",
    key: "id",
};

const rolePermissionArr: any = useRequest(rolePermissionList).onError(err => {
    message.error("初始化角色列表失败");
    console.log("初始化角色列表失败", err);
});

const permissionArr = useRequest(permissionList).onError(err => {
    message.error("初始化权限列表失败");
    console.log("初始化权限列表失败", err);
});

// 添加角色
const handleModalSubmit = roleName => {
    roleCreate({roleName}).then(() => {
        message.success("添加角色成功");
        rolePermissionArr.send();
    });
};

// 删除角色
const handleModalDelete = row => {
    message.success("删除角色成功");
    // rolePermissionArr.send();
};

// 编辑角色
const handleModalEdit = row => {
    message.success("编辑角色成功");
};
</script>
<style scoped lang="less">
.role {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .card {
        height: 100%;
        margin-top: 0;
        overflow: hidden;
        padding: 0;
        height: 100%;
        overflow: hidden;
        display: flex;
        background-color: #fff;
        > div {
            height: 100%;
            overflow: hidden;
        }

        .grouping {
            width: 300px;
            border-right: 1px solid #ccc;
            .search {
                width: 100%;
                margin-bottom: 6px;
            }
        }
        .card-table {
            flex: 1;
            .card-header {
                width: 100%;
                height: 64px;
                padding: 0 16px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #e0e0e0;

                font-size: 16px;
                font-weight: 600;
                color: rgba(0, 0, 0, 0.85);
            }
        }
    }
}
</style>
